<!--
 * @Author: MarsLay 331412466@qq.com
 * @Date: 2024-01-15 09:50:16
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-01-15 11:44:29
 * @FilePath: \ticket-center\src\pages\common\toLogin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <div class="title">人工售补票机</div>
    <div class="inner">
      <div class="inner-title">操作员登陆</div>
      <div class="inner-part">
        <div class="input">
          <div class="label">操作员ID：</div>
          <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </div>
        <div class="input">
          <div class="label">密码：</div>
          <el-input v-model="form.password" placeholder="请输入密码"></el-input>
        </div>
        <div @click="login" class="button">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/login";
export default {
  name: "toLogin",
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rule: {
        username: { required: true, message: "请输入操作员ID" },
        password: { required: true, message: "请输入密码" },
      },
    }
  },
  computed: {},
  mounted() {
    let storage = localStorage.getItem('userinfo');
    if (storage) {
      this.$router.push('/index');
    } else {
      this.loading = false;
    }
  },
  methods: {
    login() {
      const flag = this.$utils.verify(this.form, this.rule);
      if (flag) {
        this.$store.state.loading = true;
        login(this.form).then((res) => {
          if (res.data.code == 200) {
            localStorage.setItem("userinfo", JSON.stringify(res.data.data));
            this.$store.state.loading = false;
            this.$message.success("登录成功");
            setTimeout(() => {
              this.$router.replace("/index");
            }, 1500);
          }
        });
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  .title {
    margin: 30px auto 100px;
    font-size: 50px;
    color: #000000;
  }

  .inner {
    width: 70%;
    height: 50%;
    background-color: #87bbf4;

    .inner-title {
      padding: 10px 30px;
      margin-bottom: 50px;
      font-size: 28px;
      color: #000000;
    }

    .inner-part {
      .flex(column, center);
    }

    .input {
      .flex(row, center);
      padding: 5px 0;
      width: 50%;

      .label {
        width: 200px;
        text-align: right;
      }
    }

    .button {
      .flex(row, center);
      margin-top: 60px;
      width: 120px;
      height: 40px;
      color: #000000;
      background-color: #c0c0c0;
      box-shadow: 2px 2px 2px 0 #000000;
      cursor: pointer;
    }
  }
}
</style>